<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:nf="http://novelfaces.be/jsf/comp"
	xmlns:nfsc="http://novelfaces.be/showcase/jsf/comp"
	xmlns:sp="http://java.sun.com/jsf/composite/source_panel"	
	template="../../templates/componentTemplate.xhtml">

	<ui:define name="component_title">#{rb.panel}</ui:define>
	<ui:define name="component_content">
		<section class="intro">
			<p>
				This component is an html5 enabled panel (supports html5 attributes). 
			</p>
			<p>
				According to the type attribute it will generate a span (default), div, address, 
				article, aside, section, nav, hgroup, header, footer or h1 to h6.
			</p>
			
		</section>
		<p:accordionPanel id="accordion" autoHeight="false">
			<p:tab id="example1"
				title="Example 1 - This example demonstrates the different types of the panel component">
				<ui:include src="panel_example1.xhtml" />
				<sp:sourcePanel id="example1XhtmlPanel" header="#{rb.source_xhtml}"
					src="/nf/panel/panel_example1.xhtml" />
			</p:tab>
			<p:tab id="example2"
				title="Example 2 - This example demonstrates htlm5 drag and drop feature of a div (if supported by your browser)">
				<ui:include src="panel_example2.xhtml" />
				<sp:sourcePanel id="example2XhtmlPanel" header="#{rb.source_xhtml}"
					src="/nf/panel/panel_example2.xhtml" />
				<sp:sourcePanel id="example2BeanPanel" header="#{rb.source_bean}"
					sourceType="java"
					src="/src/be/novelfaces/showcase/DragAndDropManagedBean.java" />
			</p:tab>
		</p:accordionPanel>
	</ui:define>

</ui:composition>